<template>
  <div class="app">
    <div class="app-btn">
      <button @click="showView=false;lists=path">动态路由</button>
      <button @click="showView=false;lists=alias">别名</button>
      <button @click="showView=false;lists=redirect">重定向</button>
      <button @click="showView=false;lists=children">嵌套路由</button>
      <button @click="showView=false;lists=name">命名路由</button>
      <button @click="showView=false;lists=components">命名视图</button>
      <button @click="showView=false;lists=props">传参</button>
      <button @click="showView=false;lists=meta">元信息</button>
    </div>

    <div class="app-link">
      <RouterLink
        v-for="item in lists"
        :to="item.to"
        @click="showView=true"
      >
        {{ item.label }}
      </RouterLink>
    </div>

    <div class="app-view" v-if="showView">
      <div class="app-view__to">
        {{ $route.path }}
      </div>
      <div class="app-view__matched">
        {{ $route.matched[0].path }}
      </div>

      <div class="app-view__actual">
        <RouterView/>
      </div>
    </div>
  </div>
</template>

<script>
import {defineComponent} from 'vue';
import Number from '@/views/path/Number.vue';

export default defineComponent({
  components: {Number},
  data() {
    return {
      showView: false,
      lists: [],
      path: [
        {
          label: '/path/:params',
          to: `/path/aaa` // 若不受其他路径影响，aaa换成任意内容都将在此被匹配
        },
        {
          label: '/path/:paramA/much/:paramB',
          to: `/path/aaa/much/bbb` // 若不受其他路径影响，aaa和bbb换成任意内容都将在此被匹配
        },
        {
          label: '/path/:number(\\d+)',
          to: `/path/123` // 若不受其他路径影响，123换成任意数字内容都将在此被匹配
        },
        {
          label: '/path/prefix-:pathMatch(.*)',
          to: `/path/prefix-any` // 若不受其他路径影响，any换成任意内容都将在此被匹配
        },
        {
          label: '/path/:repeat*',
          to: `/path/one/two` // 若不受其他路径影响，/path后换成0个或1个任意内容都将在此被匹配
        },
        {
          label: '/path/strict',
          to: `/path/strict` // 若不受其他路径影响，strict末尾加上/无法在此被匹配
        },
        {
          label: '/path/sensitive',
          to: `/path/sensitive` // 若不受其他路径影响，sensitive换成任意大小写无法在此被匹配
        },
      ],
      alias: [
        {
          label: '/alias/:params',
          to: `/alias/111`
        },
        {
          label: '/alias-a/:params',
          to: `/alias-a/222`
        },
        {
          label: '/alias-b/:params',
          to: `/alias-b/333`
        },
        {
          label: '/alias-avoid-reuse',
          to: `/alias-avoid-reuse`
        },
      ],
      redirect: [
        {
          label: '/path-redirect',
          to: `/path-redirect`
        },
        {
          label: '/name-redirect',
          to: `/name-redirect`
        },
        {
          label: '/func-redirect',
          to: `/func-redirect`
        },
        {
          label: '/redirect-avoid-reuse',
          to: `/redirect-avoid-reuse`
        },
      ],
      children: [
        {
          label: '/children',
          to: '/children'
        }
      ],
      name: [
        {
          label: '/name',
          to: '/name'
        }
      ],
      components: [
        {
          label: '/components',
          to: '/components'
        }
      ],
      props: [
        {
          label: '/boolean-props/:username/:pwd',
          to: '/boolean-props/SYX/0304'
        },
        {
          label: '/object-props',
          to: '/object-props'
        },
        {
          label: '/func-props',
          to: '/func-props'
        },
      ],
      meta: [
        {
          label: '/meta',
          to: '/meta/meta-children'
        }
      ]
    };
  },
});
</script>

<style scoped>
.app {
  display: flex;
  column-gap: 20px;
}

.app-btn, .app-link {
  display: flex;
  flex-flow: column;
  row-gap: 10px;

  & > button {
    width: 80px;
  }
}

.app-view {
  height: 200px;
  width: 700px;
  border: 1px silver solid;
  display: flex;
  flex-flow: column;
  align-items: center;
  row-gap: 20px;
  padding: 20px;

  & > .app-view__to {
    font-size: 25px;
    font-weight: bold;
  }

  & > .app-view__matched {
    font-size: 14px;
    font-weight: bold;
    color: grey;
  }

  & > .app-view__actual {
    font-weight: bold;
    color: dodgerblue;
  }
}
</style>
